<template>
    <div class="card row"
        @click.stop="toPage">
        <div class="column-center card-item">
            <img :src="info.imgUrl">
            <p class="row-center item-text">
                <span>{{info.imgName}}</span>
                <span class="orange-color">{{info.imgNumber}}</span>
            </p>
        </div>
        <div class="card-left column">
            <div class="row title-div">
                <p class="title">{{info.imgName}}</p>
            </div>
            <div class="row grad">
                <el-rate :allow-half="true"
                    v-model="info.imgNumber"
                    disabled></el-rate>
                <span class="orange-color">{{info.imgNumber}}</span>
            </div>
            <div class="row tag-list">
                <span class="tag tag-green">{{info.state}}</span>
                <span class="tag">{{info.state}}</span>
                <span class="tag">{{info.state}}</span>
                <span class="tag">{{info.state}}</span>
            </div>
            <div class="row btn-list">
                <a href="javascript:;">想看</a>
                <a href="javascript:;">看过</a>
            </div>
            <p class="comment">{{info.comment}}</p>
        </div>
    </div>
</template>
<script>
export default {
    name: "card",
    data() {
        return {
            value1: 1
        }
    },
    props: {
        info: {
            type: Object,
            required: true
        }
    },
    methods: {
        toPage() {
            this.$router.push({ path: "/film_details" })
        }
    }
}
</script>

<style lang="less" scoped>
    .card {
        // margin-left: 30px;
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 5px;
        position: relative;
        .card-item {
            width: 115px;
            height: 210px;
            .item-text {
                margin-top: 5px;
                font-size: 13px;
                color: #37a;
                flex-wrap: wrap;
            }
        }
        .card-left {
            z-index: 99;
            visibility: hidden;
            position: absolute;
            left: 135px;
            top: 18px;
            box-sizing: border-box;
            width: 335px;
            background: #fff;
            border: 1px solid #999;
            .tag-list {
                padding: 10px 25px;
                .tag {
                    //  margin-bottom: 20px;
                    font-size: 13px;
                    padding: 2px 10px 1px;
                    background: #f5f5f5;
                    margin: 0 8px 8px 0;
                    border-radius: 12px;
                    color: #666;
                    word-break: keep-all;
                    white-space: nowrap;
                }
                .tag-green {
                    color: #fff;
                    background: #66c056;
                }
            }
            .title-div {
                padding: 10px 25px;
                .title {
                    //  margin-bottom: 10px;
                    color: #27a;
                    &:hover {
                        color: #fff;
                        background-color: #27a;
                    }
                }
            }
            .grad {
                padding: 0px 25px;
                // margin-bottom: 10px;
            }
            .btn-list {
                padding: 15px 25px;
                // margin-top: 5px;
                // margin-bottom: 10px;
                a {
                    display: inline-block;
                    // *display: inline;
                    zoom: 1;
                    margin-right: 5px;
                    border: 1px solid #bbb;
                    padding: 2px 14px 1px;
                    border-radius: 2px;
                    color: #111;
                    text-decoration: none;
                    cursor: pointer;
                }
            }
            .comment {
                background: #f5f5f5;
                border-top: 1px solid #ddd;
                padding: 20px 25px;
                color: #666;
                margin: 0;
                font-size: 13px;
                word-wrap: break-word;
            }
        }
        &:hover {
            .card-left {
                visibility: visible;
            }
        }
    }
</style>
